﻿@page "/carousels"

<h1>Carousels</h1>

<div class="docs-example">
    <BSCarousel NumberOfItems="@items.Count">
        <BSCarouselIndicators NumberOfItems="@items.Count" />
        <div class="carousel-inner">
            @for (int i = 0; i < items.Count; i++)
            {
                <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" />
            }
        </div>
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count" />
    </BSCarousel>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/carousels/carousels1.html" />
<h3>With Captions & Headers & Fade</h3>

<div class="docs-example">
    <BSCarousel NumberOfItems="@items.Count" Fade="true">
        <BSCarouselIndicators NumberOfItems="@items.Count" ActiveIndexChangedEvent="@indexChanged" />
        <div class="carousel-inner">
            @for (int i = 0; i < items.Count; i++)
            {
                Item item = items[i];
                <BSCarouselItem src="@item.Source" alt="@item.Alt">
                    <BSCarouselCaption CaptionText="@item.Caption" HeaderText="@item.Header" />
                </BSCarouselItem>
            }
        </div>
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count" />
    </BSCarousel>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/carousels/carousels2.html" />

<h3>With Clickable Image</h3>

<div class="docs-example">
    <BSCarousel NumberOfItems="@items.Count">
        <BSCarouselIndicators NumberOfItems="@items.Count" />
        <div class="carousel-inner">
            @for (int i = 0; i < items.Count; i++)
            {
                <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" ActionLink="@items[i].ActionLink" ActionLinkTarget="@items[i].ActionLinkTarget" />
            }
        </div>
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count" />
    </BSCarousel>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/carousels/carousels3.html" />

@code {
    IList<Item> items = new List<Item>
{
        new Item {
            Source = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1631dfd09f0%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1631dfd09f0%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E",
            Alt ="First Slide",
            Caption = "Slide 1",
            Header = "Slide 1 Header",
            ActionLink = "https://chanan.github.io/BlazorStrap/",
            ActionLinkTarget = "_blank"
        },
        new Item {
            Source = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1631dfd09f1%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1631dfd09f1%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.7%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E",
            Alt ="Second Slide",
            Caption = "Slide 2",
            Header = "Slide 2 Header",
            ActionLink = "https://chanan.github.io/BlazorStrap/",
            ActionLinkTarget = "_blank"
        },
        new Item {
            Source = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1631dfd09f2%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1631dfd09f2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22217.7%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E",
            Alt ="Third Slide",
            Caption = "Slide 3",
            Header = "Slide 3 Header",
            ActionLink = "https://chanan.github.io/BlazorStrap/",
            ActionLinkTarget = "_blank"
        }
    };


    private void indexChanged(int index)
    {
        Console.WriteLine("Index Changed: " + index);
    }

    class Item
    {
        public string Source { get; set; }
        public string Alt { get; set; }
        public string Caption { get; set; }
        public string Header { get; set; }
        public string ActionLink { get; set; }
        public string ActionLinkTarget { get; set; }
    }
}